<template>
	<view class="alls" @scroll="onPageScroll">
		<!-- 头部 -->
		<view class="headerbg"  :style="'background-image: url(' + asyncImgs.free_order.img + ');'">
			<view>
				<u-navbar back-icon-color="#1D1D1D" title-size="36rpx" :title-bold="true" :border-bottom="false"
					title-color="#1D1D1D" title="免单队列" :background="background"></u-navbar>
			</view>
			<view class="freeCharge">
				已有<text class="number">{{obj.queue_peopel_num || ''}}</text>人参与了免单福利
			</view>
			<view class="realTime" v-if="obj.queue_account.avatar_url">
				<view class="mr10">
					<u-image shape="circle" width="30rpx" height="30rpx" :src="obj.queue_account.avatar_url"></u-image>
				</view>
				<view class="realTime_text ">
					{{obj.queue_account.current_time || ''}}前，{{obj.queue_account.nickname || ''}}获得了免单返现
				</view>
			</view>
		</view>
		<!-- 账户提现 -->
		<view class="center_Withdrawal">
			<view class="Withdrawal" :style="'background-image: url(' + asyncImgs.free_order.zu + ');'">
				<view class="miandan">
					<view class="mianyuan">
						免单金额 (元)
					</view>
					<view class="leiji" @click="gomingxi">
						<view class="leiming">
							累计明细
						</view>
						<view class="" style="margin-left: 5rpx;">
							<u-icon color="#FFB2A2" name="arrow-right" size="20rpx"></u-icon>
						</view>
					</view>
				</view>
				<view class="money">
					¥ <text class="money_number">{{obj.free_money || 0}}</text>
				</view>
				<view class="center_mian">
					<view class="leimian">
						<view class="">
							累计免单金额
						</view>
						<view class="" style="margin-left: 14rpx;">
							¥{{obj.total_free_money || 0}}
						</view>
					</view>
					<view class="btnStyle" @click="goTixian">
						账户提现
					</view>
				</view>
			</view>
		</view>
		<!-- 切换区域 -->
		<view style="padding: 0 20rpx">
			<view class="logisticsMethods">
				<!-- 头部样式 -->
				<view class="logisticsMethods_text">
					<view :class="{'text_style': true, 'text_style_active1': activeIndex === 1, 
							'text_style_active4': activeIndex === 2, 'text_style_active7': activeIndex === 3}" @click="handleClick(1)">
						排队中
					</view>
					<view :class="{'text_style': true, 'text_style_active2': activeIndex === 1, 
							'text_style_active5': activeIndex === 2, 'text_style_active8': activeIndex === 3}" @click="handleClick(2)">
						免单中
					</view>
					<view :class="{'text_style': true, 'text_style_active3': activeIndex === 1,
							 'text_style_active6': activeIndex === 2, 'text_style_active9': activeIndex === 3}" @click="handleClick(3)">
						已完成
					</view>
				</view>
				<!-- 下方内容  自提配送-->
				<!-- v-if="activeIndex===1" -->
				<u-empty mode="list" v-if="list.length == 0" marginTop="50"></u-empty>
				<view class="none1" v-else>
					<view style="position: relative;" v-for="(item, index) in list" :key="index">
						<u-button class="zhuanjifen" v-if="activeIndex != 3 && item.is_sale == 1" @click="onJifen(item)" shape="circle" type="error" size="mini">转积分</u-button>
						<view class="number_text">
							排队序号 · {{item.current_sort}}
						</view>
						<view class="shuliang">
							队列人数 {{item.total_count}} · {{item.created_at}}
						</view>
						<view class="notSey">
							<view class="ks">
								<view class="notSey_state1" :class="{'activebg1':item.status==0}"></view>
								<view class="tcs" :class="{'active1':item.status==0}">
									排队中
								</view>
							</view>
							<view class="ks ml12">
								<view class="notSey_state2" :class="{'activebg2':item.status==3}"></view>
								<view class="tcs" :class="{'active2':item.status==3}">
									免单中
								</view>
							</view>
							<view class="ks ml12">
								<view class="notSey_state3" :class="{'activebg3':item.status==1}"></view>
								<view class="tcs" :class="{'active3':item.status==1}">
									已完成
								</view>
							</view>
						</view>
						<view class="amountDetails">
							<view class="amountDetails_Dom">
								<view class="pt24 amountDetails_Dom_text">
									消费金额(元)
								</view>
								<view class="mt10 amountDetails_money">
									¥{{item.goods_price}}
								</view>
							</view>
							<view class="amountDetails_Dom ml24">
								<view class="pt24 amountDetails_Dom_text">
									免单金额(元)
								</view>
								<view class="mt10 amountDetails_money">
									¥{{item.total_money}}
								</view>
								<view class="mt10 amountDetailsones">
									比例 <text style="color: #F0250E; margin-left: 5rpx;">{{item.rate}}%</text>
								</view>
							</view>
							<view class="amountDetails_Dom ml24">
								<view class="pt24 amountDetails_Dom_text">
									已到账(元)
								</view>
								<view class="mt10 amountDetails_money">
									¥{{item.returned_money}}
								</view>
								<view class="mt10 amountDetailsones" v-if="item.integral > 0">
									积分<text style="color: #F0250E; margin-left: 5rpx;">{{item.integral}}</text>
								</view>
							</view>
						</view>
						<view class="order_number">
							<view class="order_name">订单编号</view>
							<view class="order_num" style="margin-left: 10rpx;">{{item.order_no}}</view>
						</view>
						<view class="commodity" @click="$utils.toUrl(`/goods/goods/goods?id=${item.goods_id}`)">
							<view class="">
								<u-image border-radius="10rpx" width="112rpx" height="112rpx"
									:src="item.cover_pic"></u-image>
							</view>
							<view class="commodity_h">
								<view class="commodity_name">
									{{item.goods_name}}
								</view>
								<view class="commodity_num">
									{{item.attr_info}}
								</view>
							</view>
						</view>
						<!-- 线条 -->
						<view class="xian"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="remind">
			{{loadmore}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img: '',
				background: {
					backgroundColor: '#ff0000',
				},
				activeIndex: 1,
				loadmore: '下拉加载更多 ~',
				scrollTop: 0,
				page: 1,
				list: [],
				obj: {},
				loader: false,
			}
		},
		watch: {
			scrollTop: function(newVal, oldVal) {
				if (newVal >= 20) {
					this.background.backgroundColor = "#FFFFFF";
					return;
				} else {
					this.background.backgroundColor = '#ff0000';
					return;
				}
			}
		},
		onLoad() {
			let params = {
				status: this.activeIndex - 1,
				page: this.page,
			};
			this.getList(params)
		},
		onReachBottom() {
			if (this.loader) {
				return;
			}
			this.loadmore = '加载中 ~',
				this.page++;
			this.getList({
				status: this.activeIndex - 1,
				page: this.page,
			});
		},
		methods: {
			onJifen(item) {
				uni.showModal({
				  content: "确定要转成积分吗？",
				  confirmText: "确定",
				  success: async (res) => {
				    if (res.confirm) {
				      uni.showLoading({
				      	title: '转换中...'
				      });
					  const res = await this.$allrequest.freeOrder.queueToIntegral({queue_log_id: item.id})
					  uni.hideLoading()
					  if (res.code == 0) {
						this.$utils.toast(res.msg);
						this.loader = false
						this.list = []
						this.getList({
							status: this.activeIndex - 1,
							page: 1,
						});
					  }
				    }
				  }
				});
			},
			// 获取初始化数据
			getList(params) {
				uni.showLoading({
					title: '加载中'
				});
				this.$allrequest.freeOrder.freeOfChargeList(params).then(res => {
					this.obj = res.data
					this.img = res.data.queue_account.avatar_url
					uni.hideLoading()
					if (res.data.data.length != 0) {
						this.list = [...this.list, ...res.data.data];
						if (res.data.data.length <= 9) {
							this.loadmore = "没有更多了 ~"
						} else {
							this.loadmore = "下拉加载更多 ~"
						}
					} else {
						this.loader = true
						this.loadmore = "没有更多了 ~"
					}
					
				});
			},
			// 监听页面滑动
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			// 切换不同状态
			handleClick(index) {
				this.activeIndex = index;
				this.list = []

				let params = {
					status: this.activeIndex - 1,
					page: 1,
				};
				this.loader = false
				this.getList(params)
			},
			// 去提现
			goTixian() {
				let balance='balance'
				uni.navigateTo({
					url: `/user/shop/cash?type=${balance}`
				})
			},
			// 跳转累计明细
			gomingxi() {
				uni.navigateTo({
					url: "/freeOrder/log/log"
				})
			},
		}
	}
</script>

<style>
	.remind {
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #C1C1C1;
		font-style: normal;
		text-transform: none;
		padding-bottom: 100rpx;
		margin-top: 20rpx;
	}

	.xian {
		width: 654rpx;
		height: 4rpx;
		background: #e9e9e9;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
	}

	.commodity_num {
		color: #8C8C8C;
		margin-top: 10rpx
	}

	.commodity_name {
		color: #262626;
		height: 68rpx;
		overflow: hidden;
		/* 溢出部分隐藏 */
		text-overflow: ellipsis;
		/* 文本溢出显示省略号 */

	}

	.commodity_h {
		flex-grow: 1;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		font-style: normal;
		text-transform: none;
		margin-left: 20rpx;
	}

	.commodity {
		display: flex;
		align-items: flex-start;
		margin-top: 24rpx;
		overflow: hidden;
		/* 溢出部分隐藏 */
	}

	.order_number {
		display: flex;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		font-style: normal;
		text-transform: none;
		margin-top: 24rpx;
	}

	.order_name {
		color: #8C8C8C;
		text-align: left;
	}

	.order_num {
		color: #262626;
		text-align: left;
	}

	.amountDetailsones {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		font-style: normal;
		text-transform: none;
	}

	.amountDetails_money {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 30rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
	}

	.amountDetails_Dom_text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #8C8C8C;
		font-style: normal;
		text-transform: none;
	}

	.ml24 {
		margin-left: 24rpx;
	}

	.mt10 {
		margin-top: 10rpx;
	}

	.pt24 {
		padding-top: 24rpx;
	}

	.amountDetails_Dom {
		width: 202rpx;
		height: 172rpx;
		background: #F8F8F8;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		text-align: center;
	}

	.amountDetails {
		display: flex;
		margin-top: 24rpx
	}

	.tcs {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		font-style: normal;
		text-transform: none;
		color: #8C8C8C;
		margin-top: 12rpx;
	}

	.ks {
		width: 210rpx;
		text-align: center;
	}

	.ml12 {
		margin-left: 12rpx;
	}

	.activebg1 {
		background-color: #64D551 !important;
	}

	.active1 {
		color: #64D551 !important;
	}

	.activebg2 {
		background-color: #F9A500 !important;
	}

	.active2 {
		color: #F9A500 !important;
	}

	.activebg3 {
		background-color: #F0250E !important;
	}

	.active3 {
		color: #F0250E !important;
	}

	.notSey_state1 {
		height: 16rpx;
		background: #F8F8F8;
		border-radius: 120rpx 0rpx 0rpx 120rpx;
	}

	.notSey_state2 {
		height: 16rpx;
		background: #F8F8F8;
		border-radius: 0;
	}

	.notSey_state3 {
		width: 210rpx;
		height: 16rpx;
		background: #F8F8F8;
		border-radius: 0rpx 120rpx 120rpx 0rpx;
	}

	.notSey {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 40rpx;
	}

	.shuliang {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #8C8C8C;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-top: 10rpx;
	}

	.none1 {
		padding: 24rpx 24rpx 0 24rpx;
	}

	.number_text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 30rpx;
		color: #262626;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.alls {
		background-color: #F2F2F2;
		min-height: 100vh;
	}

	.btnStyle {
		background: #FFFFFF;
		border-radius: 120rpx 120rpx 120rpx 120rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #F0250E;
		text-align: center;
		font-style: normal;
		text-transform: none;
		width: 192rpx;
		height: 78rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.center_mian {
		display: flex;
		justify-content: space-between;
	}

	.leimian {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFB2A2;
		line-height: 96rpx;
		font-style: normal;
		text-transform: none;
		display: flex;
		align-items: center;
	}

	.money_number {
		font-size: 68rpx;
	}

	.money {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 44rpx;
		color: #FFFFFF;
		font-style: normal;
		text-transform: none;
		margin-top: 16rpx;
	}

	.leiming {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFB2A2;
		font-style: normal;
		text-transform: none;
	}

	.mianyuan {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFB2A2;
		font-style: normal;
		text-transform: none;
	}

	.leiji {
		display: flex;
		align-items: center;
	}

	.miandan {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
	}

	.headerbg {
		width: 750rpx;
		height: 432rpx;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.freeCharge {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 34rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 20rpx;
	}

	.number {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 40rpx;
		color: #F0250E;
		font-style: normal;
		text-transform: none;
	}

	.realTime {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
	}

	.realTime_text {
		font-weight: 400;
		font-size: 24rpx;
		color: #8C8C8C;
		font-style: normal;
		text-transform: none;
	}

	.mr10 {
		margin-right: 10rpx;
	}

	.center_Withdrawal {
		position: relative;
		padding: 0 20rpx;
		margin-top: -100rpx;
	}

	.Withdrawal {
		width: 100%;
		height: 284rpx;
		padding: 30rpx 40rpx;
		background-repeat: no-repeat;
		background-size: contain;
	}

	.logisticsMethods {
		border-radius: 20rpx;
		margin-top: 30rpx;
		background-color: #fff;
	}

	.logisticsMethods_text {
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background: linear-gradient(to bottom, #F2F2F2, #FFF);
		/* 设置渐变颜色和方向 */
	}

	.text_style {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #191919;
		font-style: normal;
		text-transform: none;
		width: 234rpx;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* index为1 */
	.text_style_active1 {
		font-weight: 600;
		background-color: #FFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.text_style_active2 {
		font-weight: 600;
		background-color: #F2F2F2;
		border-radius: 0rpx 0rpx 0rpx 20rpx;
	}

	.text_style_active3 {
		font-weight: 600;
		background-color: #F2F2F2;
		border-radius: 0rpx 20rpx 0rpx 0rpx;
	}

	/* index为2*/
	.text_style_active4 {
		font-weight: 600;
		background-color: #F2F2F2;
		border-radius: 20rpx 0rpx 20rpx 0rpx;
	}

	.text_style_active5 {
		font-weight: 600;
		background-color: #FFF;
		border-radius: 20rpx 20rpx 0rpx 20rpx;
	}

	.text_style_active6 {
		font-weight: 600;
		background-color: #F2F2F2;
		border-radius: 0rpx 20rpx 0rpx 20rpx;
	}

	/* index为3 */
	.text_style_active7 {
		font-weight: 600;
		background-color: #F2F2F2;
		border-radius: 20rpx 0rpx 0rpx 0rpx;
	}

	.text_style_active8 {
		font-weight: 600;
		background-color: #F2F2F2;
		border-radius: 0rpx 0rpx 20rpx 0rpx;
	}

	.text_style_active9 {
		font-weight: 600;
		background-color: #FFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}
	.zhuanjifen {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}
</style>
